<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="mini"
      @click="handleAdd"
    >新增</el-button>
    <el-button
      type="danger"
      icon="el-icon-delete"
      size="mini"
      @click="handleRemoved"
    >删除</el-button>

    <el-dialog title="BOM工序图纸新增" :visible.sync="flag" width="800" append-to-body>
      <el-form :model="form" label-width="80px">
        <el-form-item label="图纸编码" prop="drawCode">
          <el-input v-model="form.drawCode" readonly placeholder="请选择图纸编码">
            <el-button slot="append" @click="handleSelectDraw" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <DrawSelect ref="drawSelect" :itemCode="queryParams.itemCode" :drawType="2" @onSelected="onDrawSelected" > </DrawSelect>
      </el-form>
    </el-dialog>

    <div v-if="url !== null" style="width: 100%;height: 400px;">
      <iframe
        :src="form.url"
        frameborder="0"
        scrolling="auto"
        style="width: 100%; height: 100%;"
        v-if="form.url !== null"
      />
    </div>


  </div>
</template>

<script>
import { listPicture, addPicture, updatePicture, delPicture } from "@/api/mes/md/bomPicture";
import DrawSelect from "./drawSelect";

export default {
  name: "Picture",
  components: {
    DrawSelect
  },
  props: {
    processId: null,
    bomId: null,
    itemCode: null,
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bomId: this.bomId,
        processId: this.processId,
        itemCode: this.itemCode,
        url: null,
      },
      form: {},
      flag: false,
      url: null,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    'processId': function (newValue, oldValue) {
      this.queryParams.processId = newValue;
      this.getList();
    },
    'bomId': function (newValue, oldValue) {
      this.queryParams.bomId = newValue;
      this.getList();
    },
    'itemCode': function (newValue, oldValue) {
      this.queryParams.itemCode = newValue;
      this.getList();
    }
  },
  methods: {
    /** 查询BOM工序图纸列表 */
    getList() {
      listPicture(this.queryParams).then(response => {
        let list = response.rows;
        list.some(item => {
          this.form = item;
          this.url = this.form.url;
        })
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        bomId: this.bomId,
        processId: this.processId,
        url: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
    handleAdd() {
      this.flag = true;
    },
    // 图纸选择开关
    handleSelectDraw() {
      this.$refs.drawSelect.showFlag = true;
    },
    // 图纸回显
    onDrawSelected(obj) {
      if(obj !== undefined && obj !== null){
        this.reset();
        this.form.url = obj.drawUrl;
        this.url = obj.drawUrl;
        addPicture(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.flag = false;
          this.getList();
        });
      }
    },
    // 删除
    handleRemoved() {
      this.$modal.confirm('确定删除该工序图纸吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPicture(this.form.id).then(response => {
          this.$modal.msgSuccess("删除成功");
          this.url = null;
          this.reset();
          this.getList();
        });
      }).catch(() => {
        this.$modal.msgError("取消删除！");
        return false;
      })
    },
  }
};
</script>
